<template>
    <view class="gift-purchase">
        <view class="header">
            <view><uni-status-bar></uni-status-bar></view>

            <view class="search-box flex-cn">
                <view class="navbar-left flex-cn" style="flex: 1" @click="backHome">
                    <view style="width: 100rpx; color: #fff; text-align: center"
                        class="qh-rt-single qh-rt-zuo-zuo navbar-back-icon">
                    </view>
                </view>

                <view style="
            height: 80rpx;
            line-height: 80rpx;
            font-size: 36rpx;
            font-family: '.PingFang SC, PingFang SC';
            display: flex;
            justify-content: center;
            align-content: center;
            flex: 1;
            color: #fff;
            font-weight: 600;
          ">
                    {{ title }}
                </view>
                <view style="width: 320rpx; flex: 1"></view>
            </view>
        </view>

        <view class="shuom-benner_box shuom-benner_footer">

            <view class="shuom-describe-container">
                <view class="shuom-describe-card">
                    <!-- 背景装饰 -->
                    <image class="shuom-describe-bg-image"
                        src="https://safood-1317438654.cos.ap-guangzhou.myqcloud.com/tempImage/1734947838676933fe320e0.png"
                        mode="widthFix" />

                    <!-- 内容区域 -->
                    <view class="shuom-describe-content">
                        <view class="shuom-describe-text-content">
                            <text
                                class="shuom-describe-paragraph">为了表达我们对新老用户长期以来支持与厚爱的诚挚感谢，平台特别设计并推出了"福气值"这一回馈机制。</text>
                            <text
                                class="shuom-describe-paragraph">福气值，作为平台独有的积分系统，承载着满满的感恩与祝福。它不仅仅是一个数字，更是您与我们平台每次互动、每一份信任与支持的见证。通过平台进行消费，您都可以累积福气值，让每一次的参与都转化为实实在在的回馈。</text>
                        </view>
                    </view>
                </view>
            </view>

            <view class="describe-container">
                <view class="describe-content">
                    <view class="describe-box" style="display: flex;justify-content: center;align-items: center;">
                        <image
                            src="https://safood-1317438654.cos.ap-guangzhou.myqcloud.com/tempImage/1734953164676948cc58f0b.png"
                            mode="widthFix" />
                    </view>

                    <view class="describe-box describe-box-color">

                        <view class="describe-intro">
                            为了进一步提升用户的购物体验，并明确福气值的使用规则，我们特此对福气值的获取、使用及退货处理等相关细节进行详细说明，请新老用户仔细阅读：
                        </view>
                        <!-- <view class="describe-intro">
                            福气值，作为平台独有的积分系统，承载着满满的感恩与祝福。它不仅仅是一个数字，更是您与我们平台每一次互动、每一份信任与支持的见证。通过平台进行消费，您都可以累积福气值，让每一次的参与都转化为实实在在的回馈。
                        </view> -->
                    </view>



                    <view class="describe-box describe-box-color">
                        <view class="describe-section describe-section-border">
                            <view class="describe-section-title">商品福气值显示</view>
                            <view class="describe-text">

                                <text
                                    class="underline">当您成为本平台的尊享会员后，您将有资格看到商品所附带的福气值。</text>每件商品在其展示页面上都会明确标注出相应的福气值。因此，在购买之前，请务必详细浏览商品详情页，以便清楚了解该商品能够累积的福气值数量。

                            </view>
                        </view>

                        <view class="describe-section describe-section-border">
                            <view class="describe-section-title">福气值兑换规则</view>
                            <view class="describe-text">
                                平台实行 <text class="underline">1福气值=1元现金抵用券</text>的兑换规则，
                                这意味着您累积的福气值可以直接抵扣现金使用，让您的购物更加实惠。
                                <text class="underline">福气值不设置有效期限制，</text>
                                您可以随时使用，无需担心过期问题。 福气值系本平台为回馈广大用户而专门设立的虚拟财产，
                                <text class="underline">其不具备任何形式的折现、提现以及转让等权益功能。</text>
                            </view>
                        </view>

                        <view class="describe-section describe-section-border">
                            <view class="describe-section-title">福气值到账时间</view>
                            <view class="describe-text">
                                <text class="underline">商品确认收货后，</text>
                                相应的福气值将自动计入您的平台账户。您可以通过"个人中心-福气值"查看当前福气值余额。
                            </view>
                        </view>

                        <view class="describe-section describe-section-border">
                            <view class="describe-section-title">福气值使用时机</view>
                            <view class="describe-text">
                                一旦您的账户中累积了福气值，您便可以在下一次购物时使用它进行抵扣。在结算页面，系统将自动计算并显示可使用的福气值金额，为您的订单提供相应折扣。
                            </view>
                        </view>


                    </view>

                    <view class="describe-box describe-box-color">
                        <view class="describe-section describe-section-border">
                            <view class="describe-section-title">退货退款处理及福气值处理规则</view>
                            <view class="describe-text">
                                若您购买的商品需要退货退款，退款金额将按照规则对您支付的金额进行退还，退款规则如下：
                            </view>

                            <view class="describe-text">
                                • <text class="list-title"> <text class="underline">首单退货且福气值未被使用：</text>
                                    若首次订单发生退货，且福气值尚未被使用，我们将为您办理全额退款，并直接收回产生的福气值。</text>
                            </view>

                            <view class="describe-text">
                                • <text class="list-title"><text
                                        class="underline">首单退货且福气值已被使用：</text>若首次订单发生退货，且福气值已在此之前被使用，退款金额将相应扣除已使用的福气值所对应的金额部分。</text>
                            </view>

                            <view class="describe-text">
                                • <text class="list-title"><text
                                        class="underline">非首单退货：</text>若退货涉及非首次订单，退款金额为实际支付的金额，已使用的福气值将退回到您的平台账户余额中，供您在未来购物时自由使用。</text>
                            </view>
                        </view>
                    </view>

                    <view class="describe-box describe-box-color">
                        <view class="describe-section describe-section-border">
                            <view class="describe-section-title">会员管理</view>
                            <view class="describe-text">

                                本平台设有两个会员等级：
                                <text class="underline">福宝会员（初级）与福尊会员（高级）。</text>
                                不同等级的会员在购物时所能累积的福气值存在差异。请广大用户在购买商品前，仔细核对并了解各等级所对应的福气值规则。
                            </view>
                        </view>

                        <view class="describe-section describe-section-border">
                            <view class="describe-text">
                                • <text class="list-title">会员升级条件：</text>会员通过企业微信邀请自动成为福宝会员，<text
                                    class="underline">福宝会员在平台任意消费累计达到1000元或线下门店任意消费累计达到1000元时</text>，将自动升级为福尊会员；
                            </view>

                            <view class="describe-text">
                                • <text class="list-title">福气值调整：</text>福宝会员升级为福尊会员后，其福气值将自动调整为福尊会员所对应的数值。
                            </view>

                            <view class="describe-text">
                                • <text class="list-title">信息安全：</text>平台承诺保护会员的个人信息安全，未经会员同意 不会向第三方泄露会员的个人信息。
                            </view>

                            <view class="describe-text">
                                • <text class="list-title">信息更新：</text>会员应确保提供的个人信息真实有效，如有变更，请及时通过平台进行更新。
                            </view>

                            <view class="describe-text">
                                • <text class="list-title">会员资格注销：</text>会员如因个人原因需注销会员资格，可通过平台申请注销。注销后，福气值将自动失效，且不可恢复。
                            </view>

                            <view class="describe-text">
                                • <text
                                    class="list-title">会员资格恢复：</text>已注销的会员如需重新注册成为会员，需按照新会员注册流程重新进行注册，重新注册时，会员需重新提供个人信息，并遵守平台的注册规定和会员管理制度。
                            </view>
                        </view>
                    </view>


                    <view class="describe-box describe-box-color">
                        <view class="describe-section describe-section-border">
                            <view class="describe-section-title">附则</view>
                            <view class="describe-text">
                                <view class="describe-text">
                                    • <text class="list-title">规则修改：</text><text
                                        class="underline">平台有权根据市场变化及经营策略调整福气值规则，调整后的规则将通过平台公告等方式通知会员。</text>
                                </view>

                                <view class="describe-text">
                                    • <text class="list-title">争议解决：</text><text class="underline">
                                        会员在使用福气值过程中如有疑问或争议，可通过平台客服进行反馈。我们将尽快处理并回复会员的疑问或争议。
                                    </text>
                                </view>

                                <view class="describe-text">
                                    • <text class="list-title">最终解释权：</text><text class="underline">
                                        福气值规则的解释权归平台所有。如有未尽事宜，由平台根据实际情况进行解释和处理。
                                    </text>
                                </view>

                            </view>
                        </view>
                    </view>


                    <view class="describe-box-bottom describe-box-color" style="position: relative;">
                        <image style="width: 232rpx;height: 78rpx; position: absolute;top: -50rpx;left: 50rpx;"
                            src="https://safood-1317438654.cos.ap-guangzhou.myqcloud.com/tempImage/173495459567694e63d9407.png"
                            mode="widthFix"></image>

                        <view class="describe-text">
                            • <text class="list-title">
                                请在购物前仔细核对商品信息，确保所选商品符合您的需求，以减少不必要的退货情况。

                            </text>
                        </view>

                        <view class="describe-text" >
                            • <text class="list-title">
                                我们鼓励用户积极使用福气值，享受更多优惠。如有任何疑问或需要帮助，请随时联系我们的客服团队。
                            </text>
                        </view>
                    </view>
                    <view class="describe-box describe-box-color">
                        <view class="describe-text">
                            我们致力于为您提供更加便捷、高效的购物体验。感谢 对我们平台的支持与信任！
                        </view>
                    </view>

                </view>
            </view>



        </view>
    </view>
</template>

<script>
export default {
    data() {
        return {
            title: '福气值',
            isTop: true,
            isScrolled: false,
        }
    },
    computed: {
        headerStyle() {
            return `background-image: ${this.isTop
                ? 'url("https://safood-1317438654.cos.ap-guangzhou.myqcloud.com/tempImage/173494563867692b66b028b.png")'
                : "none"
                }`;
        },
        styleColor() {
            return `color: ${this.isTop ? "#fff" : "#000 "}`;
        },

    },
    methods: {
        backHome() {
            uni.navigateBack();
        },


       
    },
}
</script>


<style lang="scss" scoped>
.describe-container {
    padding: 30rpx;
    padding-bottom: 100rpx;
}


.describe-content {
    padding: 30rpx;
    color: #333;
    background: #fff;
    border-radius: 20rpx;
    background: #fff;
    background-image: url('https://safood-1317438654.cos.ap-guangzhou.myqcloud.com/tempImage/173495124067694148e9a2b.png');
    background-size: 100% 100%;
    background-repeat: no-repeat;
}

.describe-box {
    border-radius: 16rpx;
    margin-bottom: 10rpx;
}

.describe-box-bottom {
    border-radius: 16rpx;
    margin-top: 100rpx;
    margin-bottom: 10rpx;

}

.describe-box-color {
    background-color: #FAF7EA;
    padding: 36rpx;
}

.describe-title {
    color: #FF4B4B;
    font-size: 36rpx;
    font-weight: bold;
    text-align: center;
    margin-bottom: 30rpx;
}

.describe-intro {
    font-size: 26rpx;
    line-height: 1.5;
    text-indent: 2em;
}

.describe-section {

    &:last-child {
        margin-bottom: 0;
    }
}

.describe-section-title {
    color: #FF4B4B;
    font-size: 32rpx;
    font-weight: bold;
    text-align: center;
    margin-bottom: 20rpx;
    position: relative;

    &::before,
    &::after {
        content: '•';
        margin: 0 10rpx;
        color: #FF4B4B;
    }
}




.underline {
    text-decoration: underline;
    font-weight: 600;
}

.describe-list {
    padding: 20rpx 0;

    .describe-list-item {
        font-size: 28rpx;
        line-height: 1.5;
        margin-bottom: 24rpx;
        text-indent: 2em;

        &:last-child {
            margin-bottom: 0;
        }

        .list-title {
            color: #333;
            font-weight: 600;
            display: inline;
        }
    }
}

.list-title {
    font-weight: 600;
    margin-right: 10rpx;
}

.describe-text {
    font-size: 28rpx;
    line-height: 1.5;
    margin-bottom: 20rpx;
    text-indent: 0;

    &:last-child {
        margin-bottom: 0;
    }
}
</style>

<style lang="scss" scoped>
.shuom-describe-container {
    padding: 30rpx;
}

.shuom-describe-card {
    position: relative;
    width: 100%;
    border-radius: 20rpx;
    overflow: hidden;
}

.shuom-describe-bg-image {
    width: 100%;
    height: auto;
    display: block;
}

.shuom-describe-content {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    padding: 40rpx;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    padding-bottom: 60rpx;
}

.shuom-describe-text-content {
    .shuom-describe-paragraph {
        display: block;
        color: #333;
        font-size: 28rpx;
        line-height: 1.5;
        margin-bottom: 20rpx;
        text-indent: 2em;
        font-weight: 600;

        &:last-child {
            margin-bottom: 0;
        }
    }
}
</style>


<style lang="scss" scoped>
.offline-center {
    overflow-y: auto;
    padding-bottom: env(safe-area-inset-bottom);
}

.gift-purchase {
    height: 100vh;
    overflow-y: auto;
    width: 100%;
    padding-bottom: 24rpx;
}

.header {
    background-color: #fff;
    position: sticky;
    top: 0px;
    z-index: 99;
    background-color: #f5f5f5;
    background-image: url('https://safood-1317438654.cos.ap-guangzhou.myqcloud.com/tempImage/173494563867692b66b028b.png');
    background-size: 100% 100%;
    background-repeat: no-repeat;
}
</style>
